<template>
    <div style="margin:0 auto;">
        <el-container>
            <el-header height="160px" style="width: 1510px;">
                <el-row>
                    <el-col :span="6">
                        <div @click="goToLogin" v-if="this.$root.userName == null || this.$root.userName == ''">请登录</div>
                        <div v-else>&nbsp;</div>
                    </el-col>
                    <el-col :span="6">
                        <div @click="goToRegistration" v-if="this.$root.userName == null || this.$root.userName == ''">注册</div>
                        <div v-else>&nbsp;</div>
                    </el-col>
                    <el-col :span="6">
                        <div @click="goToTrolley" v-if="this.$root.userName == null || this.$root.userName == ''">购物车</div>
                        <div v-else>&nbsp;</div>
                    </el-col>
                    <el-col :span="6">
                        <div v-if = " this.$root.userName != null && this.$root.userName != '' ">你好!&nbsp;&nbsp;&nbsp;&nbsp;{{this.nickName}}</div>
                        </el-col>
                </el-row>
                <el-row style="display:inline-block;width:1520px;">
                    <el-col :span="6"  style="width: 409px;">
                        <div style="position:relative;top:10px;font-size: 26px;left:43px;font-weight: 600;color: #ff6633;line-height:35px">
                            购物商城
                        </div>
                        <div style="position:relative;bottom:0px;left:45px;font-size:22px;font-weight: 500;color: #ff6633;line-height:45px">
                            shopSystem
                        </div>
                    </el-col>
                    <el-col :span="12" style=" width: 818px; overflow: hidden; ">
                        <el-form>
                            <el-form-item>
                                <div style="position:relative;background-color:white;line-height: 50px;top:14px;border:1px solid #ff6633;border-radius:24px;border-width:2px;padding:3px">
                                    <el-row>
                                        <el-col :span="6">
                                            <el-select placeholder="宝贝" value="宝贝" style="border-radius: 24px;">
                                                <el-option label="商铺" value="shangpu">
                                                    <a href="">商铺</a>
                                                </el-option>
                                                <el-option label="天猫" value="tianmao">
                                                    <a href="">天猫</a>
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                        <el-col :span="14"><el-input v-model="searchVal" style="border:0px;"></el-input></el-col>
                                        <el-col :span="4"><el-button :round="true" type="warning" style="color:white" @click="searchGoods(searchVal)">搜索</el-button></el-col>
                                    </el-row>
                                </div>
                            </el-form-item>
                            <!-- 商品分类 -->
                            <el-form-item>
                                <div style="position:relative;line-height: 50px;bottom:14px; font-size:larger;">
                                    <a href="../App">连衣裙</a>&nbsp;&nbsp;
                                    <a href="">电器</a>&nbsp;&nbsp;
                                    <a href="">日常用品</a>&nbsp;&nbsp;
                                    <a href="">四件套</a>&nbsp;&nbsp;
                                    <a href="">家具</a>&nbsp;&nbsp;
                                    <a href="">饰品</a>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="6" style="width: 409px;">
                        <div style="background-color:white;width: 85px;height: 107px;margin:0 80px;">
                            <el-form>
                                <el-form-item >
                                    <div style="font-size:12px;margin-top: -5px;">下载购物商城</div>
                                </el-form-item>
                                <el-form-item style="position:relative;bottom:30px">
                                    <!-- 服务器开放 -->
                                    <!-- <img src="http://47.92.53.108:8080/love/img/gitee-front.png" width="90%" height="90%" alt=""> -->
                                    <!-- window本机开放 -->
                                    <img src="http://localhost:9000/shopBack/file/gitee-front.png" width="90%" height="90%" alt="">
                                </el-form-item>
                            </el-form>
                        </div>
                        
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="20" style="width:1320px ; background-color:white;line-height: 15px;margin-left: 77.72px;">
                        <!-- 分类 -->
                        <el-row>
                            <!-- 分类 -->
                            <el-col :span="6">
                                <div class="left-list" style="position:relative;background-color:rgb(231, 226, 226);width: 280px;height:360px;margin: 20px 0 0 70px;border-radius: 20px;">
                                    <div>
                                        <h2 style="position:relative;margin-left:-200px;margin-top: 30px;top: 40px;">分类</h2>
                                    </div>
                                    <div style="position:relative;top: 45px;">
                                        &nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-present"></i>&nbsp;&nbsp;
                                        <a href="">奢品</a>&nbsp; | &nbsp;
                                        <a href="">女装</a>&nbsp; | &nbsp;
                                        <a href="">半身裙</a>
                                    </div><br>
                                    <div style="position:relative;top: 45px;">
                                        <i class="el-icon-shopping-bag-1"></i>&nbsp;&nbsp;
                                        <a href="">箱包</a>&nbsp; | &nbsp;
                                        <a href="">男鞋</a>&nbsp; | &nbsp;
                                        <a href="">女鞋</a>
                                    </div><br>
                                    <div style="position:relative;top: 45px;">
                                        <i class="el-icon-view"></i>&nbsp;&nbsp;
                                        <a href="">美妆</a>&nbsp; | &nbsp;
                                        <a href="">饰品</a>&nbsp; | &nbsp;
                                        <a href="">洗护</a>
                                    </div><br>
                                    <div style="position:relative;top: 45px;">
                                        <i class="el-icon-basketball"></i>&nbsp;&nbsp;
                                        <a href="">运动</a>&nbsp; | &nbsp;
                                        <a href="">男装</a>&nbsp; | &nbsp;
                                        <a href="">百货</a>
                                    </div><br>
                                    <div style="position:relative;top: 45px;">
                                        <i class="el-icon-mobile-phone"></i>&nbsp;&nbsp;
                                        <a href="">手机</a>&nbsp; | &nbsp;
                                        <a href="">数码</a>&nbsp; | &nbsp;
                                        <a href="">礼品</a>
                                    </div><br>
                                    <div style="position:relative;top: 45px;">
                                        <i class="el-icon-refrigerator"></i>&nbsp;&nbsp;
                                        <a href="">家装</a>&nbsp; | &nbsp;
                                        <a href="">电器</a>&nbsp; | &nbsp;
                                        <a href="">车品</a>
                                    </div><br>
                                    <div style="position:relative;top: 45px;">
                                        <i class="el-icon-cold-drink"></i>&nbsp;&nbsp;
                                        <a href="">食品</a>&nbsp; | &nbsp;
                                        <a href="">生鲜</a>&nbsp; | &nbsp;
                                        <a href="">母婴</a>
                                    </div><br>
                                    <div style="position:relative;top: 45px;">
                                        <i class="el-icon-folder-add"></i>&nbsp;&nbsp;
                                        <a href="">医药</a>&nbsp; | &nbsp;
                                        <a href="">保健</a>&nbsp; | &nbsp;
                                        <a href="">进口</a>
                                    </div><br>
                                </div>
                                
                            </el-col>
                            <!-- 轮播图 -->
                            <el-col :span="18" style="position:relative;">
                                <div style="overflow: hidden; position: relative; line-height: 50px;background-color:rgb(231, 226, 226);height: 50px;width: 90%;border-radius: 20px;margin: 25px 55px 15px;">
                                    <b >
                                        <a href="" style="color:red">天猫</a>&nbsp; | &nbsp;
                                        <a href="" style="color:red">聚划算</a>&nbsp; | &nbsp;
                                        <a href="" style="color:green">天猫超市</a>&nbsp; | &nbsp;
                                        <a href="">司法拍卖</a>&nbsp; | &nbsp;
                                        <a href="">飞猪旅行</a>&nbsp; | &nbsp;
                                        <a href="">天天特卖</a>&nbsp; | &nbsp;
                                        <a href="">极有家</a>&nbsp; | &nbsp;
                                        <a href="">淘宝直播</a>
                                    </b>
                                </div>
                                
                                <el-row>
                                    <el-col :span="18" style="width: 50%;position: relative;margin: 0 0 30px 50px;height: 300px;border-radius: 25px;overflow: hidden;">
                                        <el-carousel :interval="5000" arrow="always">
                                            <el-carousel-item v-for="(item,index) in imageList" :key="index">
                                                <img :src="item.mainImage" alt="">
                                            </el-carousel-item>
                                        </el-carousel>
                                    </el-col>
                                    <el-col :span="6"  style="position:relative;">
                                        <div @click="goToPersonalHomepage" style="cursor: pointer; position:relative; margin:40px 210px;">
                                            <el-button type="warning" icon="el-icon-user-solid" circle></el-button>
                                            <!-- <el-avatar> user </el-avatar> -->
                                        </div>
                                        <div style="width:100px;margin: -30px 190px;">
                                            <p >你好!&nbsp;&nbsp;&nbsp;&nbsp;{{this.nickName}}</p>
                                        </div>
                                        <el-row style="top:40px;left:90px;">
                                            <el-col :span="8">
                                                <el-button type="success" @click="goToLogin">登录</el-button>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-button type="success" @click="goToRegistration">注册</el-button>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-button type="success" @click="goToTrolley">购物车</el-button>
                                            </el-col>
                                        </el-row>
                                        <el-row style="top:60px;width: 400px;left: 35px;">
                                            <el-col :span="6" >
                                                <a href="">
                                                    <i class="el-icon-star-off"></i>
                                                    <p>宝贝收藏</p>
                                                </a>
                                            </el-col>
                                            <el-col :span="6">
                                                <a href="">
                                                    <i class="el-icon-goods"></i>
                                                    <p>买过的店</p>
                                                </a>
                                                
                                            </el-col>
                                            <el-col :span="6">
                                                <a href="">
                                                    <i class="el-icon-school"></i>
                                                    <p>收藏的店</p>
                                                </a>
                                                
                                            </el-col>
                                            <el-col :span="6">
                                                <a href="">
                                                    <i class="el-icon-alarm-clock"></i>
                                                    <p>我的足迹</p>
                                                </a>
                                                
                                            </el-col>
                                        </el-row>

                                    </el-col>
                                </el-row>
                                
                            </el-col>
                        </el-row>
                        <!-- 猜你喜欢 -->
                        <el-row style="position:relative;">
                            <div>
                                <h2 style="position:relative;text-align: left; left: 80px;top: 30px;overflow: hidden;line-height: 60px;">猜你喜欢</h2>
                                <span style="position:relative;display:block; color:white;background-image: -webkit-linear-gradient(top, #f5ba61 0%, #d35a22 100%);width: 60px;height: 20px;line-height: 20px; font-size: 8px;border-radius: 10px;margin-left:180px;top: -25px;">个性推荐</span>
                            </div>
                            <el-col :span="5" v-for="(aa, index) in goodsList" :key="index"  style="position: relative;margin:10px 80px 20px 80px;">
                                <el-card :body-style="{ padding: '0px' }">
                                    <img :src="aa.goodsImage"
                                        class="image"  @click="goToGoodsPage(aa)">
                                    <div style=" padding: 14px;">
                                        <span>{{aa.goodsName}}</span>
                                        <div class="bottom clearfix">
                                            <time class="time">{{ currentDate }}</time>
                                            <el-button type="text" @click="goToGoodsPage(aa)">购买
                                                <div></div>
                                            </el-button>
                                            <el-button type="text" @click="addTrolley(aa)">加入购物车</el-button>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                </el-row>
            </el-main>
            <el-footer>作者：咕嘟[gudoo]</el-footer>
        </el-container>
    </div>
</template>
<script >
import { getMainImage, insertMainImage, userInfo,getGoodsByRand,} from "../ajax/get"
import {addGoods,insertCartInfo} from "../ajax/post"
export default {
    name: "ShoppingMall",
    data() {
        return {
            imageList: [],
            searchVal: "", // 搜索值
            nickName: "", // 昵称
            currentDate: this.toTimeFormate(new Date()),
            goodsCategory:"",
            goodsList: [], // 商品数据列表
            userName:"",
        };
    },
    methods: {
        // 插入商品
        goToLogin() {
            this.$router.push({
                path: '/shopLogin',
                query: {
                    path: 'ShoppingMall'
                }
            })
        },
        goToRegistration() {
            this.$router.push({
                path: '/shopRegist',
                query: {
                    path: 'ShoppingMall'
                }
            })
        },
        goToTrolley() {
            this.$router.push({
                path: '/shoppingTrolley',
                query: {
                    path: 'ShoppingMall'
                }
            })
        },
        goToPersonalHomepage() {
            this.$router.push({
                path: '/personalHomepage/singlePage',
                query: {
                    path: 'ShoppingMall'
                }
            })
        },
        //购买商品
        goToGoodsPage(goods){
            this.$router.push({
                path: '/goodsPage',
                query: {
                    goodsId: goods.id
                }
            })
        },
        // 获取首页轮播图数据
        getHomeImage() {
            getMainImage().then(res => {
                console.log(res);
                this.imageList = res.data.data;
                console.log("imageList",this.imageList);
            })
        },
        // 插入首页轮播图数据
        insertHomeImage(mainImage) {
            insertMainImage(mainImage).then(res => {
                console.log("插入首页轮播图:",res);
            })
        },
        // 搜索商品
        searchGoods(searchVal) {
            this.$router.push({
                path: '/searchgoodsPage',
                query: {
                    goodsName:searchVal,
                // this.goodsName=this.searchVal;
            
                }
            })
        },
        // 新增商品
        addGoods() {
            let obj = {
                "createTime": "",
                "goodsCategoryId": "1",
                "goodsDescription": "22",
                "goodsImage": "",
                "goodsInventoryCount": 33,
                "goodsName": "33",
                "goodsPrice": 33,
                "id": 0,
                "updateTime": ""
            }
            addGoods(obj).then(ddd => {
                console.log("添加商品:",ddd);
            })
        },
        // 查找用户信息
        findUserInfo(userName) {
            userInfo(userName).then(res => {
                console.log("用户信息:",res);
                this.nickName = res.data.data.nickName;
                this.userName = res.data.data.userName;
            })
        },
        // 将日期格式转为yyyy-MM-dd HH:mm:ss
        toTimeFormate(date) {
            let Y = date.getFullYear();
            let M =
            date.getMonth() + 1 - 0 >= 10
                ? Number(date.getMonth()) + 1
                : "0" + (Number(date.getMonth()) + 1);
            let D = date.getDate();
            let h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
            let m =
            date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
            let s =
            date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();
            return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
        },
        // 获取商品数据
        getGoodsInfo() {
            getGoodsByRand(3).then(res => {
                console.log("商品数据:",res);
                this.goodsList = res.data.data;
                console.log("赋值后的商品数据变量:",this.goodsList);
            })
        },
        
        //添加购物车数据
        addTrolley(aa){
            let obj = {
                "createTime": "",
                "goodsAllPrice": aa.goodsPrice*aa.goodsInventoryCount,
                "goodsCount": aa.goodsInventoryCount,
                "goodsId": aa.id,
                "goodsImage": aa.goodsImage,
                "goodsName": aa.goodsName,
                "goodsPrice": aa.goodsPrice,
                "id":"",
                "updateTime": "",
                "userName":this.userName,
            }
            console.log("购物车:",aa);
            console.log("用户名:",this.userName);
            insertCartInfo(obj).then(res =>{
                console.log("购物车数据:",res);
                this.$message.error(res.data.msg);
            })
        },

    },
    mounted() {
        this.getHomeImage();
        console.log("全局变量:",this.$root.userName);
        this.getGoodsInfo();
    },
    created() {
        if (this.$root.userName != null && this.$root.userName != "") {
            this.findUserInfo(this.$root.userName);
        }
    }
}
</script>

<style scoped>
    @import "../assets/css/ShoppingMall.css";
</style>